import React from "react"
import AreaPicker from "@/components/Area/AreaPicker"
const Profile = () => {
    // 返回
    const back = () => {
        React.navigate(-1)
    }
    // 获取表单实例
    const [form] = React.UI.Form.useForm()
    // 表单默认值
    const [formData, setFromData] = React.useState({
        nickname: React.Business.nickname ?? "admin",
        mobile: React.Business.mobile ?? "",
        email: React.Business.email ?? "",
        gender: React.Business.gender ?? "0",
        region: React.Business.region_text ?? '',
    })
    // 提交表单
    const onFinish = async (values: any) => {
        values.id = React.Business.id
        // 判断是否有上传图片
        if(avatar){
            values.avatar = avatar
        }
        // 判断是否有选择地区
        if(form.getFieldValue("code")){
            values.code = form.getFieldValue("code")
        }
        // 判断是否有设置密码
        if(!values.password) delete values.password
        let result:any
        if(values.avatar){
            result = await React.HTTP.upload("/business/profile",values)
        }else{
            result = await React.HTTP.post("/business/profile",values)
        }
        if(result.code == 1){
            React.success(result.msg,()=>{
                // 重新设置cookie
                React.Cookie.save("business",result.data)
                React.navigate(-1)
            })
            return false
        }else{
            React.error(result.msg)
        }
    }
    // 图片列表
    const [fileList, setFileList] = React.useState([{
        url: React.Business.avatar_text ?? "/assets/images/avatar.png",
    }])
    const [avatar,setAvatar] = React.useState("")
    // 上传图片
    const upload = async (file: any) => {
        setAvatar(file)
        return {
            url: URL.createObjectURL(file),
        }
    }
    // 删除图片
    const deleteImg = () => {
        setFileList([])
        setAvatar("")
    }
    // 地区选择
    const [showPicker,setShowPicker] = React.useState(false)
    const areaConfirm = (val: any, name: any) => {
        const region = name.join("/")
        let code = val
        for(var item of val){
            code = item
        }
        form.setFieldsValue({
            region,
            code
        })
    }

    return (
        <>
            <React.UI.NavBar onBack={back}>个人资料</React.UI.NavBar>
            <React.UI.Form
                name='form'
                form={form}
                onFinish={onFinish}
                initialValues={formData}
                layout='horizontal'
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>
                        提交
                    </React.UI.Button>
                }
            >
                <React.UI.Form.Header>个人资料</React.UI.Form.Header>
                <React.UI.AutoCenter style={{ margin: "30px 0px" }}>
                    <React.UI.ImageUploader
                        maxCount="1"
                        value={fileList}
                        onChange={setFileList}
                        upload={upload}
                        onDelete={deleteImg}
                    />
                </React.UI.AutoCenter>
                <React.UI.Form.Item name='nickname' label='昵称' rules={[{ required: true }]}>
                    <React.UI.Input placeholder='请输入昵称' />
                </React.UI.Form.Item>
                <React.UI.Form.Item name='mobile' label='手机号' rules={[{ required: true, message: "请输入手机号" }, { pattern: /^1[3-9]{1}\d{9}$/, message: "手机号格式不正确" }]}>
                    <React.UI.Input placeholder='请输入手机号' />
                </React.UI.Form.Item>
                <React.UI.Form.Item name='password' label='密码' rules={[{ min: 6, message: "密码长度不少于6位" }, { max: 15, message: "密码长度大于15位" }]}>
                    <React.UI.Input type="password" placeholder='请输入密码' />
                </React.UI.Form.Item>
                <React.UI.Form.Item name='email' label='邮箱' rules={[{ required: true, message: "请输入邮箱" }, { pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, message: "邮箱格式不正确" }]}>
                    <React.UI.Input placeholder='请输入邮箱' />
                </React.UI.Form.Item>
                <React.UI.Form.Item name='gender' label='性别' rules={[{ required: true, message: "请选择性别" }]}>
                    <React.UI.Radio.Group >
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>
                <React.UI.Form.Item name='region' label='地区' onClick={() => setShowPicker(true)}>
                    <React.UI.Input placeholder="请选择地区" readOnly />
                </React.UI.Form.Item>
                {/* 地区选择组件 */}
                <AreaPicker visible={showPicker} onClose={()=>setShowPicker(false)} onConfirm={areaConfirm} />
            </React.UI.Form>
        </>
    )
}

export default Profile